<template>
  <div id="">
    <NavCom
      :title="'购物车'"
      left_text=""
      bg_color="#f0f0f0"
      text_color="#999"
      @left-click="$router.back()"
    >
      <template #icon_left>
        <span class="iconfont icon-xiangzuojiantou"></span>
      </template>
      <template #icon_right>
        <span class="iconfont icon-sousuo"></span>
      </template>
    </NavCom>
    <!-- 遍历购物车内容 -->
    <div class="goods">
      <!-- 遍历vuex中购物车的数据 -->
      <div v-if="$store.state.cart.goods.length">
        <div
          class="good"
          v-for="good in $store.state.cart.goods"
          :key="good.goods_id"
        >
          <div class="col-10">
            <check-box
              size=".4rem"
              color="#f30"
              v-model="good.sel"
              @change="$store.dispatch('updateCart', { ...good })"
            ></check-box>
            <!-- <input type="checkbox" v-model="good.sel" @change="$store.dispatch('updateCart',{...good})"> -->
          </div>
          <div class="col-30">
            <img :src="good.img_url" alt="" width="90%" />
          </div>
          <div class="col-50">
            <p>{{ good.name }}</p>
            <p>{{ good.price }}</p>
            <!-- 把商品最新数据展开传给updateCart  -->
            <p>
              <SteperCom
                v-model="good.num"
                @input="$store.dispatch('updateCart', { ...good })"
              ></SteperCom>
            </p>
          </div>
          <div class="col-10" @click="$store.dispatch('delCart', good.id)">
            <span class="iconfont icon-lajixiang"></span>
          </div>
        </div>
        <div>
          全选<check-box
            @change="$store.dispatch('selectAll', $event)"
            size=".4rem"
            :value="$store.getters.checkAll"
          ></check-box>
        </div>
        <div class="footer">
          总数量：{{ $store.getters.totalCount }} <br />
          总价格：{{ $store.getters.totalPrice }}
        </div>
      </div>
      <div v-else>
        <empty-com title="购物车中没有内容" type="normal"></empty-com>
      </div>
    </div>
  </div>
</template>
<style scoped="scoped" lang="scss">
.good {
  display: flex;
  .col-10 {
    width: 10%;
  }
  .col-30 {
    width: 30%;
  }
  .col-50 {
    width: 50%;
  }
}
</style>
<script>
// 导入导航
import NavCom from "@/components/NavCom.vue";
import SteperCom from "@/components/SteperCom.vue";
import CheckBox from "@/components/CheckBox.vue";
import EmptyCom from "@/components/empty/EmptyCom.vue";
import {
  /* GetA,
	// GetB,
	// GetC,
	// GetD
	// GetE
	// GetF
	// GetG
	// GetH,
	// GetI,*/
  GetJ,
} from "@/api/home.js";
export default {
  components: { NavCom, SteperCom, CheckBox, EmptyCom },
  created() {
    GetJ().then((res) => {
      console.log("玻多多", res.data);
    });
    // GetI()
    // .then(res=>{
    // 	console.log("猛雨",res.data);
    // })
    // GetH()
    // .then(res=>{
    // 	console.log("夏",res.data);
    // })
    /* GetG()
			.then(res=>{
				console.log("黄",res.data);
			}) */
    // GetF()
    // .then(res=>{
    // 	console.log("段",res.data)
    // })
    // GetE()
    // .then(res=>{
    // 	console.log("邵星宇",res.data)
    // })
    // GetD()
    // .then(res=>{
    // 	console.log("韩",res.data)
    // })
    /* GetC()
		.then(res=>{
			console.log("时",res.data)
		}) */
    /* GetB()
		.then(res=>{
			console.log("亚涛",res.data)
		}) */
    // GetA()
    // .then(res=>{
    // 	// console.log("卫敏",res.data)
    // })
  },
};
</script>

<style>
</style>
